﻿@using AP.Framework.Utilities.MvcPager
@using AP.Framework.Infrastructure.Entities
@model PagedList<ApCMS.Models.ProductModels>
@{
    ViewBag.Title = "Product";    
}
<div id="content">
    <!-- ============================================
                Page Title
            ============================================= -->
    <div id="page-title">
        <div class="container clearfix">
            <h1>
                <span>首页 > 产品展示</span></h1>
            <div id="portfolio-navigation">
                <a href="#" class="port-nav-list">&nbsp;</a>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="container clearfix">
            <!-- ============================================
                        Page Content Start
                    ============================================= -->
            <ul id="portfolio-filter" class="clearfix">
                <li class="activeFilter"><a href="@Url.Action("Index", "Product")">全部</a></li>
                @foreach (var category in ViewBag.ProductCategoryList as IEnumerable<cms_ProductCategory>)
                {
                    <li class=""><a href="@Url.Action("Index", "Product", new { @proCategory = category.ID })">@(category.Name)</a></li>
                }
            </ul>
            <div>
                <form class="form-inline" method="get" action ="@Url.Action("Index", "Product")">
                <span>产品名称：</span>
                <input type="text" style="width: 120px;" name="SearchValue" />
                <button type="submit" class="btn">
                    搜索</button>
                </form>
            </div>
            <div id="portfolio" class="clearfix">
                @foreach (var product in Model)
                {
                    <div class="portfolio-item pf-uielements">
                        <div class="portfolio-image">
                            <a href="@Url.Action("Index", "Product")">
                                <img src="@(product.Photo)" alt="Cloud Icon" /></a> <a class="hidden" href="@Url.Content("~/Themes/coworker/Content/images/portfolio/full/1-2.jpg")" rel="prettyPhoto[gal1]">
                                </a><a class="hidden" href="@Url.Content("~/Themes/coworker/Content/images/portfolio/full/1-3.jpg")" rel="prettyPhoto[gal1]">
                                </a>
                            <div class="portfolio-overlay">
                                <div class="portfolio-overlay-wrap">
                                    <p>
                                        名称：@(product.Name)</p>
                                    <p>
                                        描述：@(product.Description)</p>
                                </div>
                                <div class="p-overlay-icons clearfix">
                                    <a href="@(product.Photo)" class="p-o-image" rel="prettyPhoto"></a><a href="@Url.Action("ViewDetails", "Product", new { productId = product.ID })" class="p-o-link">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-title">
                            <h3 title="Cloud Icon">
                                <a href="@Url.Action("ViewDetails", "Product", new { productId = product.ID })">@(product.Name)</a></h3>
                        </div>
                    </div>
                }
            </div>
            <div style="margin: 5px 5px 5px 5px;" class="clearfix">
                @Html.Pager(Model, new PagerOptions { PageIndexParameterName = "page" })
            </div>
            <script type="text/javascript">

                $(document).ready(function () {

                    var $container = $('#portfolio');
                    $container.isotope();
                    $(window).resize(function () {
                        $container.isotope('reLayout');
                    });
                });
                    
            </script>
            <!-- ============================================
                    Page Content Start
                ============================================= -->
        </div>
    </div>
</div>
